<!-- 导航页面 -->
<template>
  <div id="all">
    <div id="choose"><!--element ui 属性选择器-->
      <el-select v-model="value" placeholder="北京" style="width: 20vw" @change="onChange" v-if="this.$route.path=='/'">
        <el-option-group
          v-for="group in options"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-option-group>
      </el-select>

        <el-button type="primary" icon="el-icon-arrow-left" v-else style="background-color:aliceblue;color:black;border:0"
        @click="fanhui"></el-button>

    </div>

    <div id="search" v-if="this.$route.path!='/login'">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2"
        style="width: 70vw"
        id="look"
      >
      </el-input>
    </div>

    <div id="login" style="text-decoration: none; letter-spacing: 0.1rem" @click="islogin"
    v-if="this.$route.path!='/login'">
        <i class="el-icon-user" style="color: white"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
   mounted() {
    //回车键 进行查询 针对单独的button
    let newThis = this;
    document.querySelector("#look").onkeyup= function (e) {
      var key = window.event.keyCode;
      if (key == 13) {
        if (newThis.$route.path !="/search") {
           newThis.$router.push("/search");
           newThis.input2=''
        }
        else{
          newThis.$router.go(0);
        }
      }
    };
  },
  data() {
    return {
      input2: "",
      options: [
        {
          label: "热门城市",
          options: [
            {
              value: "上海",
              label: "上海",
            },
            {
              value: "北京",
              label: "北京",
            },
          ],
        },
        {
          label: "城市名",
          options: [
            {
              value: "成都",
              label: "成都",
            },
            {
              value: "深圳",
              label: "深圳",
            },
            {
              value: "广州",
              label: "广州",
            },
            {
              value: "大连",
              label: "大连",
            },
          ],
        },
      ],
      value: "",
    };
  },
  methods: {
    fanhui(){
      this.$router.go(-1);
    },
   onChange(){
     this.$store.commit("getAddress",this.value)//改变地址传参后mine页面
    //  console.log()
   },
   islogin(){//防止用户重复点击
      if(!this.isLogin){
        this.$router.push("/login")
      }
      else{
        this.$notify({
          title: '成功',
          message: "用户"+this.userName+":已经登陆了",
          type: 'success',
          duration:1000
        });
      }
   }
  },
  computed:{
    ...mapState(["isLogin","userName"])
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-select-dropdown__item {
  padding: 0 8vw;
}
#all {
  display: flex;
  justify-content: space-between;
  background-color: #e54f4f;
  align-items: center;
  height: 5vh;
  #choose {
    transform: scale(0.8, 0.7);
  }
  #search {
    transform: scale(0.8, 0.7);
    margin-left: -5vw;
  }
  #login {
    transform: scale(1.2, 1.2);
    margin-right: 2vw;
  }
}
</style>